import withLazyComponent from "@/app/decorator/withLazyComponent";
import { MailOutlined } from "@ant-design/icons";
import Link from "next/link";
import { useRouter } from "next/router";
import React from "react";
import { useEffect, useState } from "react";
import menuRouter from "@/router/index";
interface MatchRouteType {
  label: any;
  pathname: string; //  /user/1
  children: any;
  routePath: string;
  icon?: any;
}

const menuData = menuRouter.filter((x) => !x.hidden);

export default function useMatchRoute() {
  const [matchRoute, setMatchRoute] = useState<MatchRouteType | undefined>();

  const router: any = useRouter();

  useEffect(() => {
    if (!router.pathname) return;
    const _data = menuData.find((x) => x.pathname === router.pathname);
    if (_data) {
      setMatchRoute({
        label: <Link href={_data.pathname}>{_data.label}</Link>,
        pathname: router.pathname,
        children: withLazyComponent(React.lazy(_data.component as any)),
        routePath: router.route,
        icon: _data.icon, // icon是拓展出来的字段
      });
    }
  }, [router.pathname, router.route]);

  return matchRoute;
}
